<!--
  * 登录
-->
<template>
  <div class="login-container">
    <!-- <div style="display: flex; box-shadow: 0 0 20px #fff,20px 0 80px #f0f,-20px 0 80px #0ff,inset 0 0 50px #fff,inset 200px 0 80px #f0f;"> -->
    <div style="display: flex; box-shadow:2px 2px 20px 2px rgb(224 224 224 / 37%);">
      <div class="box-item desc">
        <div class="welcome">
          <p>欢迎登录 Foundation System</p>
        </div>
      </div>
      <div class="box-item login">
        <!-- <img class="login-qr" :src="loginQR" /> -->
        <div class="login-title">账号登录</div>
        <a-form ref="formRef" class="login-form" :model="loginForm" :rules="rules">
          <a-form-item name="blaccount">
            <a-input v-model:value.trim="loginForm.blaccount" placeholder="请输入用户名" />
          </a-form-item>
          <a-form-item name="blpassword">
            <a-input-password v-model:value="loginForm.blpassword" autocomplete="on"
              :type="showPassword ? 'text' : 'password'" placeholder="请输入密码：至少三种字符，最小 8 位" />
          </a-form-item>
          <a-form-item name="code">
            <a-input class="captcha-input" v-model:value.trim="loginForm.code" placeholder="请输入验证码" />
            <img class="captcha-img" :src="captchaBase64Image" @click="getCaptcha" />
          </a-form-item>
          <a-form-item>
            <div class="btn" @click="onLogin">登录</div>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { message } from 'ant-design-vue';
  import { onMounted, onUnmounted, reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { loginApi } from '/@/api/system/login-api';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { LOGIN_DEVICE_ENUM } from '/@/constants/system/login-device-const';
  import { useUserStore } from '/@/store/modules/system/user';
  import loginQR from '/@/assets/images/login/login-qr.png';
  import wechatIcon from '/@/assets/images/login/wechat-icon.png';
  import aliIcon from '/@/assets/images/login/ali-icon.png';
  import douyinIcon from '/@/assets/images/login/douyin-icon.png';
  import qqIcon from '/@/assets/images/login/qq-icon.png';
  import weiboIcon from '/@/assets/images/login/weibo-icon.png';
  import feishuIcon from '/@/assets/images/login/feishu-icon.png';
  import googleIcon from '/@/assets/images/login/google-icon.png';

  import { buildRoutes } from '/@/router/index';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { encryptData } from '/@/lib/encrypt';
  import { localSave } from '/@/utils/local-util.js';
  import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';

  //--------------------- 登录表单 ---------------------------------

  const loginForm = reactive({
    blaccount: undefined,//
    blpassword: undefined,
    uuid: null,
    code: undefined
  });
  const rules = {
    blaccount: [{ required: true, message: '用户名不能为空' }],
    blpassword: [{ required: true, message: '密码不能为空' }],
    code: [{ required: true, message: '验证码不能为空' }],
  };

  const showPassword = ref(false);
  const router = useRouter();
  const formRef = ref();
  const rememberPwd = ref(false);

  onMounted(() => {
    document.onkeyup = (e) => {
      if (e.keyCode == 13) {
        onLogin();
      }
    };
  });

  onUnmounted(() => {
    document.onkeyup = null;
  });
  // 获取uuid
  function uuid() {
    var s = [];
    var hexDigits = "0123456789abcdef";
    for (var i = 0; i < 36; i++) {
      s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
    }
    s[14] = "4";
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
    s[8] = s[13] = s[18] = s[23] = "-";
    loginForm.uuid = s.join("");
    return loginForm.uuid;
  }
  //登录
  async function onLogin() {
    formRef.value.validate().then(async () => {
      try {
        SmartLoading.show();
        const res = await loginApi.login(loginForm);
        localSave(LocalStorageKeyConst.USER_TOKEN, res.data.token != '' ? res.data.token : '');
        message.success('登录成功');
        //更新用户信息到pinia
        useUserStore().setUserLoginInfo(res.data);
        //构建系统的路由
        buildRoutes();
        router.push('/home');
      } catch (e) {
        if (e.data && e.data.code !== 0) {
          loginForm.code = null;
          getCaptcha();
        }
        smartSentry.captureError(e);
      } finally {
        SmartLoading.hide();
      }
    });
  }

  //--------------------- 验证码 ---------------------------------
  const captchaBase64Image = ref('');
  async function getCaptcha() {
    try {
      uuid()
      const params = {
        uuid: loginForm.uuid,
      };
      const dd = Object.keys(params)
        .map((key) => key + '=' + params[key])
        .join('&')
      let captchaResult = await loginApi.getCaptcha(dd);
      let blob = new Blob([captchaResult.data], { type: "image/png" });
      captchaBase64Image.value = window.URL.createObjectURL(blob);
    } catch (e) {
      smartSentry.captureError(e);
    } finally {

    }
  }

  onMounted(getCaptcha);


</script>
<style lang="less" scoped>
  @import './login.less';
</style>